<template>
    <div>
        <HeaderWrapper></HeaderWrapper>
        <div class="wrapper">
            <div class="wrapper-view">
                <div class="player_play">
                    <img src="//rs.dance365.com/img/player_play@3x.0e7144c5.png"
                         style="width: 75px;height: 75px">
                </div>
                <div class="view-img">
                    <img :src="detailList.moreBackup?.videos[0].cover">
                </div>
            </div>
        </div>
        <div class="wrapper-content">
            <div class="detail-banner">
                <div class="info-main">
                    <div class="item-header">
                        <div style="color: #111;font-size: 20px;display: flex;align-items: center">
                            <span class="origin_sign"></span>
                            <span>{{ detailList.title }}</span>
                        </div>
                        <div class="practise-btn">
                            加入练习室
                        </div>
                    </div>
                    <div class="item-container">
                        <div style="display: flex;align-items: center">
                            <img class="avatar-inline" :src="detailList.creatorBackup?.avatar"/>
                            <span class="first_line">{{ detailList.creatorBackup?.name }}</span>
                            <img
                                style="width: 16px;height: 16px;cursor: pointer;margin-left: 6px"
                                src="https://rs.dance365.com/authenticate_personal@3x.png"
                            >
                            <span class="level_box">Lv.19</span>
                            <el-button type="warning" size="large" icon="Plus" color="#f9ebf1" round><span
                                style="color:#f93684 ">关注</span></el-button>
                        </div>
                        <span class="light-time">发布时间: 08-29</span>
                    </div>
                    <div style="font-size: 16px;margin: 18px 0;color: #111;">
                        去年这支舞受到广大舞友们的喜爱，就是觉得太短了，这次又加编了一分钟，并且后半段用了歌唱的音乐剪辑，让这支舞更显大气磅礴！
                    </div>
                    <el-divider/>
                    <div style="margin-top: 10px;font-size: 16px;color: #111">
                        <span>原创作者: </span>
                        <span style="color: #f93684;cursor: pointer">
                            {{ detailList.creatorBackup?.name }}
                        </span>
                    </div>
                    <div style="margin-top: 10px;font-size: 16px;color: #111">
                        <span>原创作者: </span>
                        <span style="color: #f93684;cursor: pointer">
                             {{ detailList.relevancyAvocations?detailList.relevancyAvocations[0] :'' }}、{{ detailList.relevancyAvocations?detailList.relevancyAvocations[1] : '' }}
                        </span>
                    </div>
                </div>
            </div>
            <div class="detail-require_more">
                <el-badge :value="5" class="item">
                    <el-button type="danger" size="large" color="#ffeaf2" round>{{ detailList.requireBackup?detailList.requireBackup[0].requireDesc : '' }}</el-button>
                </el-badge>
                <el-badge :value="4" class="item">
                    <el-button type="danger" size="large" color="#ffeaf2" round>{{ detailList.requireBackup?detailList.requireBackup[1].requireDesc : '' }}</el-button>
                </el-badge>
                <el-badge :value="2" class="item">
                    <el-button type="danger" size="large" color="#ffeaf2" round>{{ detailList.requireBackup?detailList.requireBackup[2].requireDesc : '' }}</el-button>
                </el-badge>
            </div>
            <div class="panner_wrapper">
                <div class="pertinence">
                    <div style="padding:18px 0; color: #111;font-size: 24px">Ta的相关</div>
                    <div class="item-panner">
                        <div class="item-view"  v-for="(dr,index) in detailList.recommendMineBackup" :key="index">
                            <img src="https://rs.dance365.com/img/release_play@3x.fb313c4d.png"
                                 style="width: 30px;height: 30px;position: absolute;bottom:70px;left: 10px"
                            >
                            <img :src="dr.cover[0]" style="width: 240px;height: 134px">
                            <span style="font-size: 16px;color: #111;margin: 4px 0;height: 42px;">{{ dr.title }}</span>
                            <span style="color: #7d8090;font-size: 14px;display: flex;align-items: center">
                            <el-icon><VideoPlay/></el-icon>
                            <span style="margin-left: 5px">{{ dr.statisticsBackup.viewCount }}</span>
                            </span>
                        </div>
                        
                    </div>
                </div>
                <div class="pertinence">
                    <div style="padding:18px 0; color: #111;font-size: 24px">更多推荐</div>
                    <div class="item-panner">
                        <div class="item-view" v-for="(deb,index) in detailList.recommendOtherBackup" :key="index">
                            <img src="https://rs.dance365.com/img/release_play@3x.fb313c4d.png"
                                 style="width: 30px;height: 30px;position: absolute;bottom:70px;left: 10px"
                            >
                            <img :src="deb.cover[0]" style="width: 240px;height: 134px">
                            <span style="font-size: 16px;color: #111;margin: 4px 0;width: 240px;height: 42px;">{{ deb.title }}</span>
                            <span style="color: #7d8090;font-size: 14px;display: flex;align-items: center">
                            <el-icon><VideoPlay/></el-icon>
                            <span style="margin-left: 5px">{{ deb.statisticsBackup.viewCount }}</span>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="footer_wrapper">
                <div class="comment_box">
                    <img src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" style="width: 40px;height: 40px;border-radius: 100%;
                        margin-right: 10px;
                        background-size: cover;
                        background-position: 50%;
                        background-repeat: no-repeat;"/>
                    <textarea cols="30" placeholder="说点什么吧" class="text_inner"></textarea>
                </div>
                <div style="display: flex;margin: 20px 0;flex-direction: row-reverse">
                    <el-button color="#f93684">发送</el-button>
                    <el-button >取消</el-button>
                </div>
                <div style="font-size: 24px;color: #111;">
                    留言（0）
                </div>
                <el-divider />
                    <el-empty
                        image="https://rs.dance365.com/img/no_message@3x.2f295517.png"
                        description="暂无留言"
                    />
            </div>
        </div>
        <Footer></Footer>
    </div>

</template>

<script setup>
import { useRoute } from 'vue-router';
import { onMounted, ref } from 'vue';
import axios from 'axios';
    const route = useRoute();

    // 详情页数据
    const detailList = ref({})

    const initData = async () => {
        let result = await axios.get('/mock/detail/byId')
        detailList.value = result.data.data
    }
  

    onMounted(()=>{
        console.log(route.query.momentId)
        console.log(route.query.source)
        initData()
           
    })
</script>

<style scoped lang="less">
.wrapper {
    width: 100%;
    
    .wrapper-view {
        height: 634px;
        background-color: #221f23;
        
        .view-img {
            display: flex;
            justify-content: center;
            
            img {
                margin: 15px;
                width: 1060px;
                height: 595px;
            }
        }
        
        .player_play {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    }
}

.wrapper-content {
    width: 100%;
    height: 1600px;
    background-color: #f5f7f9;
    
    .detail-banner {
        width: 1060px;
        margin: 0 auto;
        background-color: #ffffff;
        
        .info-main {
            padding: 20px;
            
            .item-header {
                display: flex;
                justify-content: space-between;
                
                .origin_sign {
                    width: 40px;
                    height: 24px;
                    display: inline-block;
                    background: url(https://rs.dance365.com/landing_img_original@2x.png) no-repeat;
                    background-size: cover;
                    position: relative;
                }
                
                .practise-btn {
                    width: 106px;
                    height: 40px;
                    font-size: 16px;
                    text-align: center;
                    line-height: 40px;
                    border-radius: 20px;
                    color: #f93684;
                    border: 1px solid #f93684;
                    cursor: pointer;
                }
            }
            
            .item-container {
                padding: 19px 0px 0px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                
                .avatar-inline {
                    width: 40px;
                    height: 40px;
                    flex-shrink: 0;
                    border: 2px solid #ffc376;
                    border-radius: 50%;
                    margin-right: 9px;
                    background-size: cover;
                    background-position: 50%;
                }
                
                .first_line {
                    display: inline-block;
                    line-height: 1.3;
                    font-size: 16px;
                    color: #111;
                    width: auto !important;
                    max-width: 130px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
                
                .level_box {
                    background: linear-gradient(#ff289b, #ff43d0);
                    border: 1px solid #fff;
                    border-radius: 4px;
                    padding: 4px 14px;
                    color: #ffffff;
                    font-weight: bolder;
                    margin-left: 8px;
                    display: inline-block !important;
                    line-height: 1.15;
                    white-space: nowrap;
                    cursor: pointer;
                    margin-right: 18px;
                }
                
                .light-time {
                    color: #b1b5c1;
                    font-size: 16px;
                    vertical-align: middle;
                    float: right;
                }
            }
        }
    }
    
    .detail-require_more {
        width: 1060px;
        height: 70px;
        margin: 20px auto;
        background-color: #ffffff;
        display: flex;
        align-items: center;
        
        button {
            margin-left: 20px !important;
        }
    }
    
    .panner_wrapper {
        width: 1020px;
        margin: 0px auto;
        padding: 20px;
        background-color: #ffffff;
        
        .pertinence {
            margin-bottom: 10px;
            
            .item-panner {
                display: flex;
                justify-content: space-evenly;
                
                .item-view {
                    position: relative;
                    display: flex;
                    flex-direction: column;
                }
            }
        }
    }
    
    .footer_wrapper {
        width: 1020px;
        margin: 20px auto 0px;
        padding: 20px;
        background-color: #ffffff;
        
        .comment_box {
            display: flex;
            .text_inner{
                width: 92%;
                padding: 15px 20px;
                resize: none;
                border-radius: 2px;
                font-size: 14px;
                border: none;
                background: #f5f7f9;
                outline: none;
            }
        }
    }
}
</style>
